<template>
    <div class="parent">
        <div class="header">
            <div class="qu">
                <text class="text">区属</text>
            </div>
            <div class="qu">
                <text class="text">区级美丽乡村方案是否实施</text>
            </div>
            <div class="column_three">
                <div class="three_row_one">
                    <text class="text">2018年创建村村庄规划、实施方案编制情况</text>
                </div>
                <div class="three_row_two">
                    <div class="nullTop"></div>
                    <div class="twoBottom">
                        <div class="twoBottom_left">
                            <text class="text">创建村数</text>
                        </div>
                        <div class="twoBottom_right">
                            <div class="right_one">
                                <div class="oneTop"></div>
                                <div class="oneBottom">
                                    <div class="oneBottom_one">
                                        <text class="text">创建村启动规划编制村数</text>
                                    </div>
                                    <div class="Bottom_two">
                                        <div class="twoBottomTop"></div>
                                        <div class="twoBottomBottom">
                                            <div class="two_left"></div>
                                            <div class="two_right">
                                                <div class="tworight_one">
                                                    <text class="text">完成规划编制村数</text>
                                                </div>
                                                <div class="tworight_two">
                                                    <text class="text">通过审批村数</text>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="right_two">
                                <div class="right_two_top"></div>
                                <div class="right_two_bottom">
                                    <div class="rightBottom_left">
                                       <text class="text">实施方案完成村数</text>
                                    </div>
                                    <div class="rightBottom_right">
                                        <text class="text">通过审批村数</text>
                                    </div>
                                </div>
                            </div>
                            <div class="right_three">
                                <text class="text">开工建设村数</text>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <scroller scroll-direction>
            <div class="cont">
                <div class="dataItem" v-for="(item, index) in datalist" :key="index">
                    <div class="contItem">
                        <text class="contText">{{item.XZQHMC}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.FAYF}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.CS_CJ}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.GHQGDCS_CJ}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.GHWCCS_CJ}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.GHWCCS_CJ_SPSG}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.FABZWC_CJ}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.FABZWC_CJ_SPSG}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.KGJS_CJ}}</text>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>
export default {
    name: 'listCont',
    props: ['datalist'],
    created () {
        this.$notice.loading.show()
    },
    mounted () {
        this.$notice.loading.hide()
    }
}
</script>
<style scoped>
    .parent{
        width: 750px;
        flex: 1;
    }
    .header{
        width: 750px;
        height: 488px;
        background-color: rgba(35,196,160,1);
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .qu{
        width: 83.3px;
        height: 488px;
        padding-left: 28px;
        padding-right: 28px;
        justify-content: center;
        align-items: center;
        border-right-color:#fff;
        border-right-style: solid;
        border-right-width: 2px;
    }
    .text{
        font-size:28px;
        font-family:PingFangSC-Semibold;
        color:rgba(255,255,255,1);
    }
    .column_three{
        width: 583.4px;
        height: 488px;
    }
    .three_row_one{
        width: 583.4px;
        height: 70px;
        border-bottom-color: #fff;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .three_row_two{
        width: 583.4px;
        height: 418px;
    }
    .nullTop{
        width: 583.4px;
        height: 50px;
    }
    .twoBottom{
        width: 583.4px;
        height: 368px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .twoBottom_left{
        width: 83.3px;
        height: 368px;
        justify-content: center;
        align-items: center;
        padding-left: 25px;
        padding-right: 15px;
    }
    .twoBottom_right{
        width: 499.8px;
        height: 368px;
        border-top-color: #fff;
        border-top-style: solid;
        border-top-width: 2px;
        border-left-color: #fff;
        border-left-style: solid;
        border-left-width: 2px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .right_one{
        width: 249.9px;
        height: 368px;
        border-right-color: #fff;
        border-right-style: solid;
        border-right-width: 2px;
    }
    .right_two{
        width: 166.6px;
        height: 368px;
        border-right-color: #fff;
        border-right-style: solid;
        border-right-width: 2px;
    }
    .right_three{
        width: 83.3px;
        height: 368px;
        justify-content: center;
        align-items: center;
        padding-left: 30px;
        padding-right: 25px;
    }
    .oneTop{
        width: 249.9px;
        height: 50px;
    }
    .oneBottom{
        width: 249.9px;
        height: 318px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .oneBottom_one{
        width: 83.3px;
        height: 318px;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
    }
    .oneBottom_two{
        width: 166.6px;
        height: 318px;
        border-top-color: #fff;
        border-top-style: solid;
        border-top-width: 2px;
        border-left-color: #fff;
        border-left-style: solid;
        border-left-width: 2px;
    }
    .twoBottomTop{
        width: 166.6px;
        height: 50px;
    }
    .twoBottomBottom{
        width: 166.6px;
        height: 268px;
        border-top-color: #fff;
        border-top-style: solid;
        border-top-width: 2px;
        border-left-color: #fff;
        border-left-style: solid;
        border-left-width: 2px;
    }
    .two_left{
        width: 166.6px;
        height: 40px;
    }
    .two_right{
        width: 166.6px;
        height: 268px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .tworight_one{
        width: 83.3px;
        height: 228px;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
    }
    .tworight_two{
        width: 83.3px;
        height: 228px;
        border-top-color: #fff;
        border-top-style: solid;
        border-top-width: 2px;
        border-left-color: #fff;
        border-left-style: solid;
        border-left-width: 2px;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
    }
    .right_two_top{
        width: 166.6px;
        height: 100px;
    }
    .right_two_bottom{
        width: 166.6px;
        height: 278px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .rightBottom_left{
        width: 83.3px;
        height: 278px;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
    }
    .rightBottom_right{
        width: 83.3px;
        height: 278px;
        border-top-color: #fff;
        border-top-style: solid;
        border-top-width: 2px;
        border-left-color: #fff;
        border-left-style: solid;
        border-left-width: 2px;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
    }
    .cont{
        width: 750px;
        padding-bottom: 96px;
    }
    .dataItem{
        width: 750px;
        height: 80px;
        border-bottom-color: #dddbdb;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #F7FAFF;
    }
    .contItem{
        width: 83.3px;
        height: 80px;
        border-right-color: #dddbdb;
        border-right-style: solid;
        border-right-width: 2px;
        justify-content: center;
        align-items: center;
    }
    .contText{
        font-size: 24px;
        font-family:PingFangSC-Semibold;
        color: #333;
    }
</style>
